<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			
			header{
				width: 100%;
				height: 140px;
				border: 1px solid red;
				background-color: cadetblue;
				
			}
			nav{
				height: 50px;
				border:  1px solid red;
				background-color: cyan;
			}
			.w{
				width: 1024px;
				margin: 0 auto;
				border:  1px solid black;
			}
			.main{
				border:  1px solid black;
				display: flex;
				flex-wrap: wrap;
			}
			.main section{
				width: 687px;
				height: 442px;
				background-color: aliceblue;
				border:  1px solid red;
		
			}
			.main aside{
				height: 442px;
				width: 304px;
				border:  1px solid red;
				background-color: aquamarine;
				
			}
			.main aside section{
				border:  1px solid red;
				background-color: blanchedalmond;
				width: 331px;
				height: 220px;
		
			}
			.main article{
				width:1024px;
				height: 170px;
				background-color:saddlebrown;	
				flex-wrap: wrap;
			}
			.mid1{

				display: flex;
				width:1024px;
				height: 290px;
				border:  1px solid red;
				background-color: blanchedalmond;
				margin-top: 15px;
			}
			.mid1 aside{
				width: 50%;
				height: 290px;
				border:  1px solid red;
			}
			.mid2{
				width:1024px;
				height: 130px;
				border:  1px solid red;
				background-color: blanchedalmond;
				margin-top: 15px;
			}
			.mid3{
				width:1024px;
				height: 300px;
				border:  1px solid red;
				background-color: blanchedalmond;
				margin-top: 15px;
				display: flex;
			}
			.mid3 aside{
				width: 33.3%;
				height: 300px;
				border:  1px solid red;
			}
			.mid4{
				width:1024px;
				height: 200px;
				border:  1px solid red;
				background-color: blanchedalmond;
				margin-top: 15px;
				display: flex;
			}
			.mid4 aside{
				width: 33.3%;
				height: 200px;
				border:  1px solid red;
				
			}
			.footer{
				width:1024px;
				height: 600px;
				margin-top: 25px;
				background-color: red;
				border:  1px solid black;
				display: flex;
				flex-direction: column;
				
			}
			.f_one{
				width:1024px;
				height: 100px;
				background-color: #fff;
				border:  1px solid black;
			}
			.f_two{
				width:1024px;
				height: 350px;
				background-color: green;
				border:  1px solid #fff;
			}
			
		</style>
	</head>
	<body>
		<header>
		</header>
		<nav class="w"></nav>
		<div class="main w">
			<section></section>
			<aside>
				<section></section>
				<section></section>
			</aside>
			<article></article>
		</div>
		<section class="mid1 w">
			<aside></aside>
			<aside></aside>
		</section>
		<section class="mid2 w"></section>
		<section class="mid3 w">
			<aside></aside>
			<aside></aside>
			<aside></aside>
		</section>
		<section class="mid4 w">
			<aside></aside>
			<aside></aside>
			<aside></aside>
		</section>
		<section class="mid3 w">
			<aside></aside>
			<aside></aside>
			<aside></aside>
		</section>

		<footer class="footer w"> 
			<section class="f_one"></section>
			<section class="f_two"></section>
			<section class="f_bo"></section>
		</footer>

	</body>
</html>
